﻿@page "/heatmap-chart/json-cell"

@using Syncfusion.Blazor.HeatMap
@using sf_blazor_heatmapdata
@using Newtonsoft.Json;
@inherits SampleBaseComponent;

<SampleDescription>
    <p> This sample visualizes the number of international tourist arrivals in millions of the most visited destinations in the world.</p>
</SampleDescription>
<ActionDescription>
   <p>In this example, you can see how to bind JSON data and configure the Heatmap using the data adaptor support. You can bind the JSON data with information for each individual cell to the Heatmap using <code>IsJsonData</code> and by defining the <code>AdaptorType</code> properties. In cell JSON data, the value for each cell is mapped using the <code>XDataMapping</code>, <code>YDataMapping</code>, and <code>ValueMapping</code> properties.</p>
   <p>Tooltip is enabled in this example. To see the Tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
</ActionDescription>

<div class="control-section">
    <div class="row">
        <div class="col-md-12">
            <SfHeatMap DataSource="@Data">
                <HeatMapTitleSettings Text="Most Visited Destinations by International Tourist Arrivals">
                    <HeatMapTitleTextStyle Size="15px" FontWeight="500" FontStyle="Normal"></HeatMapTitleTextStyle>
                </HeatMapTitleSettings>
                <HeatMapDataSourceSettings IsJsonData="true" AdaptorType="AdaptorType.Cell" XDataMapping="RowId" YDataMapping="ColumnId" ValueMapping="Value"></HeatMapDataSourceSettings>
                <HeatMapXAxis Labels="@XLabels"></HeatMapXAxis>
                <HeatMapYAxis Labels="@YLabels"></HeatMapYAxis>
                <HeatMapPaletteSettings>
                    <HeatMapPalettes>
                        <HeatMapPalette Color="#DCD57E"></HeatMapPalette>
                        <HeatMapPalette Color="#A6DC7E"></HeatMapPalette>
                        <HeatMapPalette Color="#7EDCA2"></HeatMapPalette>
                        <HeatMapPalette Color="#6EB5D0"></HeatMapPalette>
                    </HeatMapPalettes>
                </HeatMapPaletteSettings>
                <HeatMapCellSettings  ShowLabel="true" Format="{value} M">
                    <HeatMapCellBorder Width = "1"  Radius = "4" Color = "White"></HeatMapCellBorder>
                </HeatMapCellSettings>
            </SfHeatMap>
        </div>
    </div>
    <div style="float: right; margin-right: 10px;">
        Source:
        <a href="https://en.wikipedia.org/wiki/World_Tourism_rankings" target="_blank">https://en.wikipedia.org/</a>
    </div>
</div>

@code{
    string[] XLabels = new string[] { "Austria", "China", "France", "Germany", "Italy", "Mexico", "Spain", "Thailand", "UK", "USA" };
    string[] YLabels = new string[] { "2010", "2011", "2012", "2013", "2014", "2015", "2016" };
    class HeatmapData
    {
        public string RowId { get; set; }
        public string ColumnId { get; set; }
        public string Value { get; set; }
    }
    HeatmapData[] Data = new HeatmapData[] { 
               new HeatmapData  { RowId= "France", ColumnId= "2010", Value= "77.6" },
               new HeatmapData  { RowId= "France", ColumnId= "2011", Value= "79.4" },
               new HeatmapData  { RowId= "France", ColumnId= "2012", Value= "80.8" },
               new HeatmapData  { RowId= "France", ColumnId= "2013", Value= "86.6" },
               new HeatmapData  { RowId= "France", ColumnId= "2014", Value= "83.7" },
               new HeatmapData  { RowId= "France", ColumnId= "2015", Value= "84.5" },
               new HeatmapData  { RowId= "France", ColumnId= "2016", Value= "82.6" },
               new HeatmapData  { RowId= "USA", ColumnId= "2010", Value= "60.6" },
               new HeatmapData  { RowId= "USA", ColumnId= "2014", Value= "75.3" },
               new HeatmapData  { RowId= "USA", ColumnId= "2011", Value= "65.4" },
               new HeatmapData  { RowId= "USA", ColumnId= "2012", Value= "70.8" },
               new HeatmapData  { RowId= "USA", ColumnId= "2012", Value= "70.8" },
               new HeatmapData  { RowId= "USA", ColumnId= "2013", Value= "73.8" },
               new HeatmapData  { RowId= "USA", ColumnId= "2014", Value= "75.3" },
               new HeatmapData  { RowId= "USA", ColumnId= "2015", Value= "77.5" },
               new HeatmapData  { RowId= "USA", ColumnId= "2016", Value= "77.6" },
               new HeatmapData  { RowId= "Spain", ColumnId= "2010", Value= "64.9" },
               new HeatmapData  { RowId= "Spain", ColumnId= "2011", Value= "52.6" },
               new HeatmapData  { RowId= "Spain", ColumnId= "2012", Value= "60.8" },
               new HeatmapData  { RowId= "Spain", ColumnId= "2013", Value= "65.6" },
               new HeatmapData  { RowId= "Spain", ColumnId= "2014", Value= "52.6" },
               new HeatmapData  { RowId= "Spain", ColumnId= "2015", Value= "68.5" },
               new HeatmapData  { RowId= "Spain", ColumnId= "2016", Value= "75.6" },
               new HeatmapData  { RowId= "China", ColumnId= "2010", Value= "55.6" },
               new HeatmapData  { RowId= "China", ColumnId= "2011", Value= "52.3" },
               new HeatmapData  { RowId= "China", ColumnId= "2012", Value= "54.8" },
               new HeatmapData  { RowId= "China", ColumnId= "2013", Value= "51.1" },
               new HeatmapData  { RowId= "China", ColumnId= "2014", Value= "55.6" },
               new HeatmapData  { RowId= "China", ColumnId= "2015", Value= "56.9" },
               new HeatmapData  { RowId= "China", ColumnId= "2016", Value= "59.3" },
               new HeatmapData  { RowId= "Italy", ColumnId= "2010", Value= "43.6" },
               new HeatmapData  { RowId= "Italy", ColumnId= "2011", Value= "43.2" },
               new HeatmapData  { RowId= "Italy", ColumnId= "2012", Value= "55.8" },
               new HeatmapData  { RowId= "Italy", ColumnId= "2013", Value= "50.1" },
               new HeatmapData  { RowId= "Italy", ColumnId= "2014", Value= "48.5" },
               new HeatmapData  { RowId= "Italy", ColumnId= "2015", Value= "50.7" },
               new HeatmapData  { RowId= "Italy", ColumnId= "2016", Value= "52.4" },
               new HeatmapData  { RowId= "UK", ColumnId= "2010", Value= "28.2" },
               new HeatmapData  { RowId= "UK", ColumnId= "2011", Value= "31.6" },
               new HeatmapData  { RowId= "UK", ColumnId= "2012", Value= "29.8" },
               new HeatmapData  { RowId= "UK", ColumnId= "2013", Value= "33.1" },
               new HeatmapData  { RowId= "UK", ColumnId= "2014", Value= "32.6" },
               new HeatmapData  { RowId= "UK", ColumnId= "2015", Value= "34.4" },
               new HeatmapData  { RowId= "UK", ColumnId= "2016", Value= "35.8" },
               new HeatmapData  { RowId= "Germany", ColumnId= "2010", Value= "26.8" },
               new HeatmapData  { RowId= "Germany", ColumnId= "2011", Value= "29" },
               new HeatmapData  { RowId= "Germany", ColumnId= "2012", Value= "26.8" },
               new HeatmapData  { RowId= "Germany", ColumnId= "2013", Value= "27.6" },
               new HeatmapData  { RowId= "Germany", ColumnId= "2014", Value= "33" },
               new HeatmapData  { RowId= "Germany", ColumnId= "2015", Value= "35" },
               new HeatmapData  { RowId= "Germany", ColumnId= "2016", Value= "35.6" },
               new HeatmapData  { RowId= "Mexico", ColumnId= "2010", Value= "23.2" },
               new HeatmapData  { RowId= "Mexico", ColumnId= "2011", Value= "24.9" },
               new HeatmapData  { RowId= "Mexico", ColumnId= "2012", Value= "30.1" },
               new HeatmapData  { RowId= "Mexico", ColumnId= "2013", Value= "22.2" },
               new HeatmapData  { RowId= "Mexico", ColumnId= "2014", Value= "29.3" },
               new HeatmapData  { RowId= "Mexico", ColumnId= "2015", Value= "32.1" },
               new HeatmapData  { RowId= "Mexico", ColumnId= "2016", Value= "35" },
               new HeatmapData  { RowId= "Thailand", ColumnId= "2010", Value= "15.9" },
               new HeatmapData  { RowId= "Thailand", ColumnId= "2011", Value= "19.8" },
               new HeatmapData  { RowId= "Thailand", ColumnId= "2012", Value= "21.8" },
               new HeatmapData  { RowId= "Thailand", ColumnId= "2013", Value= "23.5" },
               new HeatmapData  { RowId= "Thailand", ColumnId= "2014", Value= "24.8" },
               new HeatmapData  { RowId= "Thailand", ColumnId= "2015", Value= "29.9" },
               new HeatmapData  { RowId= "Thailand", ColumnId= "2016", Value= "32.6" },
               new HeatmapData  { RowId= "Austria", ColumnId= "2010", Value= "22" },
               new HeatmapData  { RowId= "Austria", ColumnId= "2011", Value= "21.3" },
               new HeatmapData  { RowId= "Austria", ColumnId= "2012", Value= "24.2" },
               new HeatmapData  { RowId= "Austria", ColumnId= "2013", Value= "23.2" },
               new HeatmapData  { RowId= "Austria", ColumnId= "2014", Value= "25" },
               new HeatmapData  { RowId= "Austria", ColumnId= "2015", Value= "26.7" },
               new HeatmapData  { RowId= "Austria", ColumnId= "2016", Value= "28.1" }
    };
}